<template>
  <view class="tab-box">
    <!--    <view class="btn-complete" @click="open">一键生成海报</view>-->
    <liu-poster
      ref="liuPoster"
      :width="750"
      :height="1282"
      @change="change"
    ></liu-poster>
    <!-- <image class="success-img" :src="url" @click="previewImg(url)" ></image> -->
	<image class="success-img" :src="url" @click="previewImg(url)" mode="widthFix"></image>
    <view class="btn-complete" v-if="toggle">
      <view class="down_" @click="downFn">长按图片保存</view>
      <!-- <view class="copy_">
        <button open-type="share">
          <view>分享给好友</view>
        </button>
      </view> -->
    </view>
  </view>
</template>

<script>
import {getShareQrCode } from "@/api/share/share";
import { BASE_URL_IMAHE } from "../../../utils/https";

export default {
  data() {
    return {
      canvasList: [
        {
          type: "image", //绘制类型(color:背景色;image:图片;text:文字;line:线条),
          width: 750, //宽度(rpx)
          // height: 1300, //高度(rpx)
		  height: 1282, //高度(rpx)
          x: 0, //x轴位置(离左边的距离rpx)
          y: 0, //y轴位置(离上边的距离rpx)
          radius: 0, //圆角(rpx)
          lineWidth: 0, //边框宽度(rpx)
          lineColor: "#FFFFFF", //边框颜色
          // path: "https://www.ylnumber.cn/file/test/productImage/20230706/c9e493e434da4aec8218ad0ee2856eec.png", //图片地址(type为image时必填)
		   // path: "https://www.ylnumber.cn/file/test/productImage/20230717/bff439f54509473980c43da424296af6.png", //图片地址(type为image时必填)
		   path: "/static/share/share.png", //图片地址(type为image时必填)
          childs: [
            {
              type: "image", //绘制类型(color:背景色;image:图片;text:文字;line:线条),
              width: 150, //宽度(rpx)
              height: 150, //高度(rpx)
              x: 560, //x轴位置(离左边的距离rpx)
              y: 940, //y轴位置(离上边的距离rpx)
              radius: 0, //圆角(rpx)
              lineWidth: 0, //边框宽度(rpx)
              lineColor: "#FFFFFF", //边框颜色
              path: "", //图片地址(type为image时必填)
            },
          ],
        },
        // {
        //   type: "line", //绘制类型(color:背景色;image:图片;text:文字;line:线条),
        //   width: 4, //线条宽度(rpx)
        //   color: "#FFFFFF", //线条颜色
        //   startX: 20, //起点x轴位置(离左边的距离rpx)
        //   startY: 270, //起点y轴位置(离上边的距离rpx)
        //   endX: 730, //终点x轴位置(离左边的距离rpx)
        //   endY: 270, //终点y轴位置(离上边的距离rpx)
        //   lineType: "dash", //线条类型(solid:实线;dash:虚线)
        // },
        // {
        //   type: "line", //绘制类型(color:背景色;image:图片;text:文字;line:线条),
        //   width: 4, //线条宽度(rpx)
        //   color: "#FFFFFF", //线条颜色
        //   startX: 20, //起点x轴位置(离左边的距离rpx)
        //   startY: 1000, //起点y轴位置(离上边的距离rpx)
        //   endX: 730, //终点x轴位置(离左边的距离rpx)
        //   endY: 1000, //终点y轴位置(离上边的距离rpx)
        //   lineType: "dash", //线条类型(solid:实线;dash:虚线)
        // },
        // {
        //   type: "text", //绘制类型(color:背景色;image:图片;text:文字;line:线条),
        //   width: 500, //文本宽度(rpx)
        //   height: 150, //文本高度(rpx)
        //   x: 40, //x轴位置(离左边的距离rpx)
        //   y: 1050, //y轴位置(离上边的距离rpx)
        //   color: "#9043FD", //文本颜色
        //   fontSize: 32, //文字大小(rpx)
        //   lineHeight: 45, //文字行高(rpx)
        //   bold: true, //文字是否加粗
        //   content:
        //     "这个是一段测试文字，这个是一段测试文字，这个是一段测试文字，这个是一段测试文字，这个是一段测试文字。", //文本内容(type为text时必填)
        // },
        // {
        //   type: "image", //绘制类型(color:背景色;image:图片;text:文字;line:线条),
        //   width: 150, //宽度(rpx)
        //   height: 150, //高度(rpx)
        //   x: 550, //x轴位置(离左边的距离rpx)
        //   y: 1050, //y轴位置(离上边的距离rpx)
        //   radius: 4, //圆角(rpx)
        //   lineWidth: 6, //边框宽度(rpx)
        //   lineColor: "#FFFFFF", //边框颜色
        //   path: "https://img1.baidu.com/it/u=1471990434,2209509794&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400", //图片地址(type为image时必填)
        // },
      ],
      url: "",
      userInfoServer: "",
      qRcode: "",
      toggle: false,
    };
  },
  onLoad() {},
  onShow() {
    if (!this.toggle) {
      this.open();
    }
    this.userInfoServer = uni.getStorageSync("userInfoServer") || "";
  },
  methods: {
    //下载图片
    downFn() {
      uni.saveImageToPhotosAlbum({
        filePath: this.url,
        success: function (res) {
          if (res.errMsg === "saveImageToPhotosAlbum:ok") {
            uni.showToast({
              title: `保存成功`,
              icon: "success",
              duration: 2000,
            });
          } else {
            uni.showToast("宣传图片地址有误");
          }
          console.log(res, "res");
          console.log("save success");
        },
      });
    },

    //获取token
    async getToken() {
      uni.showLoading({
        //加载框
        title: "加载中",
      });
      const userId = uni.getStorageSync("userId")?uni.getStorageSync("userId"):"";
	  const v=uni.getStorageSync("v")?uni.getStorageSync("v"):"";
	  if (!userId) {
		  uni.hideLoading()
	    // 弹窗告诉用户去登录
	    uni.showModal({
	      title: "温馨提示",
	      content: "此时此刻需要您登录喔~",
	      // showCancel: false,
	      confirmText: "去登录",
	      cancelText: "再逛会",
	      success: (res) => {
	        console.log(getCurrentPages(), "getCurrentPages()");
	        if (res.confirm) {
	          uni.navigateTo({
	            url: "/pages/empower/mp-weixin",
	          });
	        }
	        if (res.cancel && getCurrentPages().length > 1) {
	          uni.navigateBack();
	        }
	      },
	    });
	    return;
	  }
	  // const userId = uni.getStorageSync("userId") || "";
      const res = await getShareQrCode({userId:userId,v:v});
      console.log(res, "res 获取小程序码");
      if (res.result==0) {
        // const userId = uni.getStorageSync("userId")
        //   ? uni.getStorageSync("userId")
        //   : "";
		  
        // if (!openId) {
			// chiak去掉
	    
		
        const qrcode =this.httpUrlFn(res.qrCode);
        console.log(qrcode, "qrcode");

        this.canvasList[0].childs[0].path = qrcode;
        this.$nextTick(() => {
          this.$refs.liuPoster.init(this.canvasList);
          console.log(this.canvasList, "this.canvasList");
        });
      }
    },
	httpUrlFn(item) {
	  return   BASE_URL_IMAHE + item ;
	},

    //开始绘制
    open() {
      this.getToken();
    },
    //绘制成功返回生成的海报图片地址
    change(e) {
      console.log(e, "eeee");
      this.toggle = true;
      this.url = e;
    },
    //预览生成的海报图片
    previewImg(url) {
      console.log(url, "url");
      if (!url) return;
      uni.previewImage({
        urls: [url],
      });
    },
  },
  /**
   * 分享当前页面
   */
  onShareAppMessage(e) {
    console.log(e, "分享");
    return {
      title: "一个兴趣社交购物平台",
      imageUrl:BASE_URL_IMAHE+'file/test/productImage/20230710/285ce91ce9774534b5c57947ca7c96c9.jpg',
      path: `/pages/index/index?parentInviteCode=${
        uni.getStorageSync("phoneNumber") || ""
      }`,
    };
  },
};
</script>

<style lang="scss" scoped>
.tab-box {
  width: 100%;
  // height: 100vh;
  min-height: 100vh;
  box-sizing: border-box;
  //background-color: #f0f0f0;
  // background: #fceecc;
  background: #FCF6E4;
  //padding-top: 20rpx;

  .btn-reset {
    width: 100%;
    height: rpx(36);
    background: #ffffff;
    border-radius: rpx(20);
    border: rpx(1) solid #fd430e;
    font-size: rpx(15);
    color: #3e3e3e;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-complete {
    //width: 98%;
    //height: rpx(38);
    //border-radius: rpx(20);
    //font-size: rpx(15);
    //color: #ffffff;
    //background-color: #fd430e;
    //display: flex;
    //align-items: center;
    //justify-content: center;
    //margin: 0 auto;
    width: 100%;
    height: rpx(62);
    //background: pink;
    display: flex;
    align-items: center;
    justify-content: center;
	margin-top: rpx(-85);
	// position: fixed;
	// bottom: rpx(20);

    > view {
      width: rpx(150);
      height: rpx(44);
      background: linear-gradient(180deg, #fa9d3b 0%, #fa5151 100%);
      border-radius: rpx(22);
      font-size: rpx(17);
      font-weight: bold;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    > .down_ {
      margin-right: rpx(19);
	  z-index: 10;
    }
    > .copy_ {
      button {
        background: transparent;
        > view {
          width: rpx(150);
          height: rpx(44);
          background: linear-gradient(180deg, #fa9d3b 0%, #fa5151 100%);
          border-radius: rpx(22);
          font-size: rpx(17);
          font-weight: bold;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .success-img {
    width: 100vw;
    //height: 100vh;
    height: 85vh;
    //margin-top: 20rpx;
  }
}
</style>
